{% extends "base.html" %}

{% block fades %}
  fadeColor("fadeQ1","#FFFFFF","#000000",4,20,'f');
  fadeColor("fadeQbY1","#FFFFFF","#000000",4,20,'fb');
  fadeColor("fadeQbN1","#FFFFFF","#000000",4,20,'fb');
  fadeColor("heading","#FFFFFF","#000000",4,20,'f');
{% endblock %}

{% block logout %}
  <div id=logout>
    {{person.firstName}} {{person.lastName}},
    <a href="/?logout=1">logout</a>
  </div>
{% endblock %}

{% block javascript %}
 function answer(n, value, last) {
    var eleY = document.getElementsByName("fadeQbY"+n);
    var eleN = document.getElementsByName("fadeQbN"+n);
    if(value == 1) {
      eleY[0].style.backgroundColor = "#CCCCCC";
      eleN[0].style.backgroundColor = "#FFFFFF";
    }
    else {
      eleY[0].style.backgroundColor = "#FFFFFF";
      eleN[0].style.backgroundColor = "#CCCCCC";
    }
    if(n == 1) {
      window.value1 = value;
    }
    else if(n == 2) {
      window.value2 = value;
    }
    else if(n == 3) {
      window.value3 = value;
    };
    n1 = n+1;
    if(last != 1) {
      fadeColor('fadeQ'+n1,'#FFFFFF','#000000',4,20,'f');
      fadeColor('fadeQbY'+n1,'#FFFFFF','#000000',4,20,'fb');
      fadeColor('fadeQbN'+n1,'#FFFFFF','#000000',4,20,'fb');
    } else {
      a = "id1={{questions.0.id}}&id2={{questions.1.id}}&id3={{questions.2.id}}&"+"a1="+window.value1+"&a2="+window.value2+"&a3="+window.value3;
      window.location = "/answers?"+a;
    };
  }
{% endblock %}

{% block content %}
  <div id="content">
   {% for q in questions %}
      <div id="question" name="question">  
        <div id="questionText" name="fadeQ{{forloop.counter}}">  
          {{q.text|safe}}
        </div>
        <div id="questionButtons" name="fadeQ{{forloop.counter}}">
	  {% if forloop.last %}
            <button NAME="fadeQbY{{forloop.counter}}" ONCLICK="answer({{forloop.counter}}, 1, 1);">ja</button>
            <button NAME="fadeQbN{{forloop.counter}}" ONCLICK="answer({{forloop.counter}}, 0, 1);">nej</button>
          {% else %}
            <button NAME="fadeQbY{{forloop.counter}}" ONCLICK="answer({{forloop.counter}}, 1, 0);">ja</button>
            <button NAME="fadeQbN{{forloop.counter}}" ONCLICK="answer({{forloop.counter}}, 0, 0);">nej</button>
          {% endif %}
        </div>
      </div>
      <br>
    {% endfor %}
  </div>
{% endblock %}
